<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-spin tip="Loading..." :spinning="spinning">
        <h3 class="title">基本信息</h3>
        <div class="zh-message">
          <h3 class="addmoban-title">账号信息</h3>
          <div class="qz-details-div">
            <span>账号类型</span>
            <span>{{ $store.state.user.info.admin_type_name }}</span>
          </div>
          <div class="qz-details-div">
            <span>创建时间</span>
            <span>{{ $store.state.user.info.create_time }}</span>
          </div>
          <!-- <div class="qz-details-div">
          <span>密码</span>
          <a-input-password placeholder="密码" style="width: 200px" v-model="password" />
          <a-button type="link" @click="reset"> 重置 </a-button>
        </div> -->
        </div>
        <div class="zh-message">
          <h3 class="addmoban-title">认证信息</h3>
          <div class="qz-details-div">
            <span>组织名称</span>
            <span>{{ userInfo.company_name ? userInfo.company_name : '无' }}</span>
          </div>
          <div class="qz-details-div">
            <span>统一社会信用代码</span>
            <span>{{ userInfo.credit_code ? userInfo.credit_code : '无' }}</span>
          </div>
          <div class="qz-details-div">
            <span>法定代表人</span>
            <span>{{ userInfo.legal_name ? userInfo.legal_name : '无' }}</span>
          </div>
          <div class="qz-details-div">
            <span>认证管理员</span>
            <span>{{ userInfo.auth_name ? userInfo.auth_name : '无' }}</span>
          </div>
          <div class="qz-details-div">
            <span>认证方式</span>
            <span>{{ userInfo.auth_type_name ? userInfo.auth_type_name : '无' }}</span>
          </div>
          <div class="qz-details-div">
            <span>认证通过时间</span>
            <span>{{ userInfo.auth_pass_name ? userInfo.auth_pass_name : '无' }}</span>
          </div>
        </div>
      </a-spin>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { authInfo } from '@/api/user'

export default {
  name: 'NewsTypes',
  components: {
    STable,
    Ellipsis,
  },
  data() {
    return {
      password: '123123',
      userInfo: {},
      spinning: false,
    }
  },
  computed: {
    role: function () {
      if (this.$store.state.user.info.role === 'guest') {
        return '游客'
      } else if (this.$store.state.user.info.role === 'user') {
        return '普通用户'
      } else if (this.$store.state.user.info.role === 'real_user') {
        return '实名用户'
      } else if (this.$store.state.user.info.role === 'company_user') {
        return '企业用户'
      } else if (this.$store.state.user.info.role === 'op_user') {
        return '运营人员'
      }
    },
  },
  mounted() {
    // 获取用户认证信息
    this.getAuthInfo()
    console.log(this.$store.state.user)
  },
  methods: {
    reset() {},
    getAuthInfo() {
      this.spinning = true
      authInfo({})
        .then((res) => {
          console.log(res)
          this.userInfo = res.data
          this.spinning = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>
<style lang="less" scoped>
.title {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  span {
    font-size: 12px;
    margin-left: 10px;
    color: #999;
  }
}
.zh-message {
  padding-left: 50px;
  .addmoban-title {
    position: relative;
    font-size: 14px;
    margin-bottom: 35px;
  }
  .addmoban-title::after {
    position: absolute;
    left: -7px;
    top: 50%;
    margin-top: -8px;
    content: '';
    display: block;
    width: 2px;
    height: 15px;
    background: #1890ff;
  }
  .qz-details-div {
    margin-bottom: 35px;
    span {
      font-size: 14px;
      line-height: 1;
      display: inline-block;
      color: #333333;
    }
    span:first-child {
      width: 150px;
      color: #999;
      text-align: right;
      font-size: 12px;
      margin-right: 20px;
    }
    input {
      width: 200px;
    }
  }
  .qz-details-div:first-child {
    margin-top: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
  }
}
</style>